<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏房间</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="{$smarty.const.PUBLIC_PATH}css/amazeui.min.css">
    <script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/amazeui.min.js"></script>
    <script  type="text/javascript" src="{$smarty.const.PUBLIC_PATH}js/myself/websocket.js"></script>
    <style>
        .am-badge{
            float: right;
            line-height:normal;
        }
        .am-img-thumbnail{
            width:40px;
        }
    </style>
</head>
<body>
    <ul class="am-list am-list-border">
        {foreach $users as $k=>$v}
        <li>
            <img src="{$v.main_img}" alt="..." class="am-img-thumbnail am-radius">
            <span>{$v.name}</span>

            {if $v.uid==$users['host']['uid']}
                <span class="am-badge am-badge-success start" data-uid="{$v.uid}">开始游戏</span>
                <span class="am-badge am-badge-warning">房主</span>
            {else}
                {if in_array($v.uid,$has_ready)}
                    <span id="p{$v.uid}" class="am-badge am-badge-success" data-uid="{$v.uid}">已准备</span>
                {else}
                    <span id="p{$v.uid}" class="am-badge am-badge-success ready" data-uid="{$v.uid}">准备</span>
                {/if}
            {/if}
        </li>
        {/foreach}
    </ul>
    <div style="text-align: center;" >
        <a class="am-btn am-btn-success flush" >刷新</a>
    </div>
</body>
<script>
    var socket = new WebSocket('ws://192.168.1.7:8888/test.php');
    socket.onopen = function(event) {
        console.log('连接成功');
        // console.log(socket.readyState)
        var content=JSON.stringify({ "type":"in","roomuid":"{$smarty.const.$roomuid}"})
        socket.send(content);
    };

    socket.onmessage = function(event) {
        var msg = event.data;
        // console.log(msg);return;
        msg=JSON.parse(msg);
        msg=JSON.parse(msg);
        // msg=JSON.parse(msg)
        console.log(msg);
        // return;
        // if(msg.type=="ready"&&msg.roomuid=="{$smarty.const.$roomuid}"){
        //     window.location.reload()
        // }else if(msg.type=="start"&&msg.roomuid=="{$smarty.const.$roomuid}"){
        //     window.location.href="{$smarty.const.__MODULE__}/Draw/room/room_uid/{$smarty.const.$roomuid}"
        // }else{
        //     alert("socket错误")
        // }
        if(msg.roomuid=="{$smarty.const.$roomuid}"){ //表示是该房间的消息
            switch (msg.type) {
                case "ready":
                    window.location.reload()
                    break;
                case "start":
                    window.location.href="{$smarty.const.__MODULE__}/Draw/room/room_uid/{$smarty.const.$roomuid}"
                    break;
                case "in":
                    window.location.reload()
                    break;
                default :
                    alert("socket错误")
            }
        }

    };


        $(".ready").click(function(){
        var thisp=$(this)
        var uid="{$smarty.const.$roomuid}";
        var data={
            "room_uid":uid,
            "user_uid":thisp.data("uid"),
        }
        // console.log(data); return
        $.post("{$smarty.const.__MODULE__}/Ajax/set_ready",data,function (ret) {
            // console.log(ret)
            if(ret.error){
                console.log(ret.error)
                content=JSON.stringify({ "type":"ready","roomuid":uid})
                socket.send(content);
                thisp.text('已准备')
                // thisp.removeClass("ready")
            }else{
                // console.log(thisli.data("href"))
                //window.location.href=thisli.data("href")
            }
            // console.log(ret)
        })

        // console.log("{$smarty.const.$roomuid}")
    })
    $(".start").click(function(){
        var uid="{$smarty.const.$roomuid}";
        var data={
            "host_uid":$(this).data("uid"),
            "room_uid":uid,
        }
        $.post("{$smarty.const.__MODULE__}/Ajax/start",data,function (ret) {
            // console.log(ret)
            if(ret.error){
                // console.log(ret)
                content=JSON.stringify({ "type":"start","roomuid":uid})
                socket.send(content);
                window.location.href="{$smarty.const.__MODULE__}/Draw/room/room_uid/"+uid
            }else{
                alert(ret.course)
                //window.location.href=thisli.data("href")
            }
            // console.log(ret)
        })

    })
</script>
</html>